<!-- #####################
    Edit By han
    Time: 2023-01-13 22:23:45
 -->
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>哔哩哔哩漫画 - bilibili 正版漫画平台</title>
    <meta name="description"
        content="哔哩哔哩正版漫画阅读平台, 海量官方漫画连载在线观看, 二次元动漫迷的追漫神器, 热门漫画: 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 我家大师兄脑子有坑, 一拳超人, 灵能百分百, 铳梦等">
    <meta name="keywords"
        content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
    <!-- 顶部 shortcut -->
    <nav class="shortcut">
        <div class="container">
            <!-- logo -->
            <h1>
                <a href="#">
                    <img src="./images/logo.png" alt="">
                    <span>哔哩哔哩漫画</span>
                </a>
            </h1>
            <!-- 顶部小导航 top_nav -->
            <div class="top_nav">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/bilibili.png" alt="bilibili~小电视">主站
                        </a>
                    </li>
                    <li class="active">
                        <a href="#" class="blue">首页<span></span></a>
                    </li>
                    <li><a href="#">分类</a></li>
                    <li><a href="#">更新</a></li>
                    <li><a href="#">排行榜</a></li>
                </ul>
            </div>
            <!-- 右侧 -->
            <div class="right_part">
                <div class="search_bar">
                    <input type="text" placeholder="末日机械师">
                    <button class="iconfont icon-41"></button>
                </div>
                <div class="download_app">
                    <button>下载 APP</button>
                </div>
                <div class="user_history panel">
                    <a href="#">历史</a>
                </div>
                <div class="user_catch panel">
                    <a href="#">追漫</a>
                </div>
                <div class="user_avatar panel">
                </div>
            </div>
        </div>
    </nav>

    <!-- banner -->
    <div class="banner">
        <ul>
            <li><a href=""> <img src="./uploads/banner_01.jpg" alt=""></a></li>
            <li><a href=""> <img src="./uploads/banner_02.jpg" alt=""></a></li>
            <li><a href=""> <img src="./uploads/banner_03.jpg" alt=""></a></li>
        </ul>
        <div class="mask_left"></div>
        <div class="mask_right"></div>
        <div class="container">
            <button class="arrow_left iconfont icon-xiangzuojiantou"></button>
            <button class="arrow_right iconfont icon-xiangyoujiantou"></button>
        </div>
    </div>

    <!-- 主导航 main_nav -->
    <div class="main_nav">
        <div class="container navs">
            <a href="#">热血</a>
            <a href="#">古风</a>
            <a href="#">玄幻</a>
            <a href="#">奇幻</a>
            <a href="#">悬疑</a>
            <a href="#">都市</a>
            <a href="#">历史</a>
            <a href="#">仙侠</a>
            <a href="#">竞技</a>
            <a href="#">灵异</a>
            <a href="#">架空</a>
            <a href="#">青春</a>
            <a href="#">西幻</a>
            <a href="#">现代</a>
            <a href="#">全部></a>
        </div>
    </div>

    <!-- 推荐模块 recommend -->
    <div class="recommend container">
        <div class="title clearfix">
            <h2>为你推荐</h2>
            <a href="#">
                <span class="iconfont icon-31shuaxin"></span>
                换一批
            </a>
        </div>
        <div class="content">
            <ul class="clearfix list">
                <!-- <li>
                    <a href="#">
                        <img src="./uploads/recommend_01.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_02.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_03.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_04.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_05.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_06.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_07.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_08.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_09.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_10.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_11.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/recommend_12.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li> -->
            </ul>
        </div>
    </div>

    <!-- 热门速递 hot -->
    <div class="recommend container hot">
        <div class="title clearfix">
            <h2>为你推荐</h2>
            <ul>
                <li class="active">
                    <a href="#" class="blue">
                        二次元养老院
                        <span></span>
                    </a>
                </li>
                <li><a href="#">9.0分以上佳作精选</a></li>
            </ul>
            <a href="#">
                <span class="iconfont icon-31shuaxin"></span>
                换一批
            </a>
        </div>
        <div class="content">
            <ul class="clearfix lists">
                <!-- <li>
                    <a href="#">
                        <img src="./uploads/hot_01.png" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_02.png" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_03.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_04.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_05.jpg" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_06.png" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_07.png" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>都市
                        </p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/hot_08.png" alt="">
                        <h4>我犊子道木我犊子道木我犊子道木我犊子道木
                        </h4>
                        <p>蓝翅还是归类为生活漫画，故事后续发展除了人物角色的爱情亲情成
                        </p>
                    </a>
                </li> -->

            </ul>
        </div>
    </div>

    <!-- 底部模块 footer -->
    <footer>
        <div class="container clearfix">
            <div class="row_one">
                <div class="left_part fl">
                    <div class="footer_logo fl">
                        <img src="./images/logo.png" alt="">
                        <span>哔哩哔哩漫画</span>
                    </div>
                    <div class="url_links fl">
                        <a href="#" class="fl">关于我们</a>
                        <a href="#" class="fl">联系我们</a>
                        <a href="#" class="fl">友情链接</a>
                        <a href="#" class="fl">加入我们</a>
                    </div>
                </div>
                <div class="line_between fl"></div>
                <div class="right_part fl">
                    <a href="#">
                        <img src="./images/官方号.jpg" alt="">
                        <p>B站官号</p>
                    </a>
                    <a href="#">
                        <img src="./images/官方号.jpg" alt="">
                        <p>B站官号</p>
                    </a>
                    <a href="#">
                        <img src="./images/官方号.jpg" alt="">
                        <p>B站官号</p>
                    </a>
                </div>
            </div>
            <div class="row_two"></div>
        </div>
    </footer>
    <script src="./js/index.js"></script>
</body>

</html>